<script setup lang="ts">
import { ref } from "vue";
import InputDemo from "./components/input/demo/index.vue";

let isShow = ref(false);

const close = () => {};

const navLists = [
  { name: "主页" },
  { name: "分类大厅" },
  { name: "私藏内容" },
  { name: "待定" },
  { name: "待定" },
];

let activeIndex = ref(0);
</script>

<template>
  <div class="app">
    <vua-head
      :navLists="navLists"
      v-model="activeIndex"
      navLiStyle="padding:0.8rem 1.4rem"
    >
      <template #icon>Vuan</template>

      <template #middle> 这里可以用来放输入框 </template>

      <template #right> 这里可以放用户信息 </template>
    </vua-head>

    <div style="width: 500px; margin-left: 100px; margin-top: 100px">
      <vua-input placeholder="我是全局注册的" style="width: 300px"></vua-input>

      <vua-button style="margin-top: 20px" @click="isShow = true"
        >Default</vua-button
      >

      <div></div>
    </div>
    <vua-modal v-model="isShow" style="width: 800px">
      你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
    </vua-modal>
  </div>

      <vua-cover>
      <template #icon>
        <img
          style="width: 200px;height:200px;border-radius: 50%;"
          src="https://img2.baidu.com/it/u=3324651361,57503951&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500"
          alt="头像"
        />
      </template>
    </vua-cover>
</template>
<style></style>
